<template>
  <div class="public_page_style">
    <div class="content_style">
      <div class="left">
        <!--    欢迎回来    -->
        <jx-card :card-customize="{height:'13vh'}">
          <template slot="content">
            <div class="welcome">{{ nowTime }}好：{{ $store.getters['user/userName'] }}</div>
            <div class="tips">{{ welcomePhrase }}</div>
          </template>
        </jx-card>
        <!--    近期活动    -->
        <jx-card ref="recentRef" :card-customize="{height:'40vh'}">
          <template slot="content">
            <upcoming-events/>
          </template>
        </jx-card>
        <!--    待办事项    -->
        <jx-card ref="todoRef" :card-customize="{height:'30vh',marginTop:'2vh'}">
          <template slot="content">
            <Todo @openAddTask="openAddTask"/>
          </template>
        </jx-card>
      </div>

      <div class="right">
        <!--    日历部分    -->
        <jx-card ref="calendarRef" :card-customize="{height:'35vh',marginBottom:'2vh'}">
          <template slot="content">
            <Calendar/>
          </template>
        </jx-card>
        <!--    快速搜索    -->
        <jx-card :card-customize="{height:'15vh',marginBottom:'2vh'}">
          <template slot="content">
            <div class="search">
              <div class="text">快速搜索</div>
              <el-input class="input" placeholder="搜索文件、联系人或任务..." prefix-icon="el-icon-search"/>
            </div>
          </template>
        </jx-card>
        <!--    团队动态    -->
        <jx-card ref="teamRef" :card-customize="{height:'33vh',marginBottom:'2vh'}">
          <template slot="content">
            <div class="team_dynamics">
              <div class="text">团队动态</div>
              <div v-for="(item,i) in whoList" :key="item.name" class="who_action">
                <div :class="`avatar avatar${i}`"/>
                <div class="text">
                  <div class="name">
                    <span>{{ item.name }}</span>
                    <span>{{ item.content }}</span>
                  </div>
                  <div class="time">
                    {{ item.time }}
                  </div>
                </div>
              </div>
            </div>
          </template>
        </jx-card>
      </div>
    </div>

    <AddTask ref="AddTaskRef"/>
  </div>
</template>

<script>
import Todo from '@/components/Todo/index.vue'
import UpcomingEvents from '@/components/UpcomingEvents/index.vue'
import Calendar from '@/components/Calendar/index.vue'
import AddTask from "@/components/AddTask/index.vue";
import {mountedFun} from "@/views/TaskManagement/utils";

export default {
  name: "index",
  components: {
    UpcomingEvents,
    Todo,
    Calendar,
    AddTask
  },
  data() {
    return {
      nowTime: null,
      whoList: [
        {
          name: '张志远',
          content: '完成了项目文档的更新',
          time: '10分钟之前'
        },
        {
          name: '林美琪',
          content: '添加了新的客户需求',
          time: '30分钟之前'
        },
        {
          name: '王建国',
          content: '发布了新的工作安排',
          time: '2小时之前'
        },
      ]
    }
  },
  computed: {
    welcomePhrase() {
      if (this.nowTime === '上午') {
        return '元气满满的一天从早上开始😊'
      } else if (this.nowTime === '下午') {
        return '累了就休息一下哦，下午的时间还很长~😊'
      } else {
        return '这么晚了还要工作吗？加油！😊'
      }
    }
  },
  mounted() {
    this.nowTime = this.getTimePeriod()
    mountedFun(this)

    /**
     * 进入首页的时候刷新这些组件，实现模拟后台请求数据效果
     * @type {string[]}
     */
    const loadingRefs = ['recentRef', 'todoRef', 'calendarRef', 'teamRef']
    loadingRefs.forEach(ref => {
      this.$refs[ref].loading = true
    })
    const LOADING_DELAY = 1000
    setTimeout(() => {
      loadingRefs.forEach(ref => {
        this.$refs[ref].loading = false
      })
    }, LOADING_DELAY)
  },
  methods: {
    getTimePeriod() {
      const now = new Date()
      const hours = now.getHours()

      if (hours >= 0 && hours < 12) {
        return "上午"
      } else if (hours >= 12 && hours < 18) {
        return "下午"
      } else {
        return "晚上"
      }
    },
    openAddTask() {
      this.$refs.AddTaskRef.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input__inner {
  border: #cccccc77 1px solid;
  border-radius: 10px;
}

.content_style {
  height: 100%;
  display: flex;

  .left {
    flex: 1;
    padding-right: 2vw;

    .welcome {
      font-size: 3vh;
      padding: 2vh;
    }

    .tips {
      font-size: 2vh;
      padding-left: 2vh;
      color: #4a4a4a;
    }
  }

  .right {
    width: 33%;

    .search {
      padding: 2vh;

      .text {
        font-size: 2vh;
        margin-bottom: 2vh;
      }

      i {
        color: #cccccc77;
      }
    }

    .team_dynamics {
      display: flex;
      flex-direction: column;
      padding: 2vh;

      .text {
        font-size: 2vh;
        margin-bottom: 4vh;
      }

      .who_action {
        display: flex;

        .avatar {
          width: 2vw;
          height: 2vw;
          background-image: url("../../assets/team_avatar/zzy.png");
          background-repeat: no-repeat;
          background-position: center;
          background-size: 100% 100%;
          margin-right: 1vw;
        }

        .avatar1 {
          background-image: url("../../assets/team_avatar/lmq.png");
        }

        .avatar2 {
          background-image: url("../../assets/team_avatar/wjg.png");
        }

        .text {
          display: flex;
          flex-direction: column;
          justify-content: center;

          .name {
            font-size: 1.5vh;

            span:nth-child(1) {
              margin-right: 3px;
              font-weight: 600;
              margin-bottom: 3px;
            }

            span:nth-child(2) {

            }
          }

          .time {
            font-size: 1.2vh;
            color: #858585;
          }
        }
      }
    }
  }
}
</style>
